<template>
  <div id="globalHeader">
    <a-row class="grid-demo" align="center" :wrap="false">
      <a-col flex="auto">
        <div class="menu-demo">
          <a-menu
            mode="horizontal"
            :selected-keys="selectedKeys"
            @menu-item-click="doMenuClick"
          >
            <a-menu-item
              key="0"
              :style="{ padding: 0, marginRight: '38px' }"
              disabled
            >
              <div class="titleBar">
                <img src="../assets/logo.png" class="logo" />
                <div class="title">鱼答答</div>
              </div>
            </a-menu-item>
            <a-menu-item v-for="item in visibleRoutes" :key="item.path"
              >{{ item.name }}
            </a-menu-item>
          </a-menu>
        </div>
      </a-col>
      <a-col flex="100px">
        <!--        <div v-if="store.state.user?.loginUser?.userName">-->
        <!--          {{ store.state.user?.loginUser?.userName ?? "未登录" }}-->
        <!--        </div>-->
        <!--        <div v-else>-->
        <!--          <a-button type="primary" href="/user/login">登录</a-button>-->
        <!--        </div>-->
        <a-popover position="bottom">
          <a-avatar
            :style="{ backgroundColor: '#3370ff' }"
            :imageUrl="store.state.user?.loginUser.userAvatar"
            style="cursor: pointer"
          >
            <IconUser
              v-if="
                store.state.user?.loginUser.userAvatar === '' ? false : true
              "
            />
          </a-avatar>
          {{ store.state.user?.loginUser?.userName }}
          <!--          <a-space>-->
          <!--            <icon-user size="25" />-->
          <!--            {{ store.state.user?.loginUser?.userName }}-->
          <!--          </a-space>-->
          <template #content>
            <a-button
              href="/user/login"
              v-if="
                store.state.user.loginUser.userName === '游客' ? true : false
              "
              >立即登录
            </a-button>
            <a-space direction="vertical" v-else>
              <a-button href="/user/center">个人中心</a-button>
              <a-button @click="logout" status="danger">退出登录</a-button>
            </a-space>
          </template>
        </a-popover>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import checkAccess from "@/access/checkAccess";
import { useStore } from "vuex";
import { userLogoutUsingPost } from "@/api/userController";
import message from "@arco-design/web-vue/es/message";

const store = useStore();
const router = useRouter();
//当前选中的菜单项
const selectedKeys = ref(["/"]);

//路由跳转时，自动更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

//展示在菜单栏的路由数组
const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    // 根据权限过滤菜单
    if (!checkAccess(store.state.user.loginUser, item.meta?.access as string)) {
      return false;
    }
    return true;
  });
});
//点击菜单跳转到对应页面
const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};
//退出登录
const logout = async () => {
  const res = await userLogoutUsingPost();
  //登录成功跳转到主页
  if (res.data.code === 200) {
    await store.dispatch("user/userLoginOut");
    router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error("退出失败," + res.data.message);
  }
};
</script>

<style scoped>
#globalHeader {
}

.titleBar {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 16px;
  color: black;
}

.logo {
  height: 48px;
}
</style>
